<template>
  <div class="shopcart">
    <div class="content">
      <div class="content-left">
        <div class="logo-wrapper">
          <div class="logo" :class="{'highlight': totalCount > 0}" @click="opendetail">
            <i class="fa fa-shopping-cart icon-shopcart" :class="{'highlight': totalCount > 0}"></i>
          </div>
          <div class="num" v-show="totalCount>0">{{totalCount}}</div>
        </div>
        <div class="price" :class="{'highlight': totalPrice > 0}">￥{{totalPrice}}</div>
        <div class="desc">另需配送费{{deliveryPrice}}元</div>
      </div>
      <div class="content-right">
        <div class="pay" :class="{'highlight': payable }" @click="pay">
          {{payDesc}}
        </div>
      </div>
    </div>
    <v-shopcartdetail :isshow="detailisshow" :selectFoods="selectFoods"
                      @on-closeDetail="oncloseDetail"></v-shopcartdetail>
  </div>
</template>

<script type="text/ecmascript-6">
  import shopcartdetail from '../shopcartdetail/shopcartdetail.vue';
  import router from '@/router';

  export default {
    name: 'shopCart',
    props: {
      selectFoods: {
        type: Array,
        default() {
          return [];
        }
      },
      deliveryPrice: {
        type: Number,
        default: 0
      },
      minPrice: {
        type: Number,
        default: 0
      }
    },
    computed: {
      /* 总金额 */
      totalPrice() {
        let total = 0;
        this.selectFoods.forEach((food) => {
          total += food.price * food.count;
        });
        return total;
      },
      /* 总数量 */
      totalCount() {
        let total = 0;
        this.selectFoods.forEach((food) => {
          total += food.count;
        });
        this.currentCount = total;
        return total;
      },
      /* 是否可以结算 */
      payable() {
        let total = 0;
        this.selectFoods.forEach((food) => {
          total += food.price * food.count;
        });
        return total >= this.minPrice;
      },
      /* 结算文案 */
      payDesc() {
        let result = this.minPrice + '元起送';
        if (this.totalPrice >= this.minPrice) {
          result = '去结算';
        }
        if (this.totalPrice < this.minPrice && this.totalPrice > 0) {
          result = '还差￥' + (this.minPrice - this.totalPrice) + '起送';
        }
        return result;
      }
    },
    data() {
      return {
        msg: 'shopCart',
        currentCount: 0,
        detailisshow: false
      };
    },

    methods: {

      opendetail() {
        if (this.detailisshow) {
          this.detailisshow = false;
          return;
        }
        if (this.totalCount > 0) {
          this.detailisshow = true;
        }
      },
      oncloseDetail() {
        this.detailisshow = false;
      },

      pay() {
        if (this.payable) {
          router.push({name: 'orderConfirm'});
        }
      }
    },
    components: {'v-shopcartdetail': shopcartdetail}
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .shopcart
    width 100%
    .content
      position relative
      z-index 20
      height 48px
      display flex
      font-size 0px
      background #141d27
      .content-left
        flex 1
        .logo-wrapper
          position: relative
          display inline-block
          top -10px
          margin 0 12px 0 12px
          padding 6px
          width 56px
          height 56px
          box-sizing border-box
          vertical-align top
          border-radius 50%
          background #141d27
          .logo
            width 100%
            height 100%
            text-align center
            border-radius 50%
            background #2b343c
            &.highlight
              background rgb(0, 160, 220)
            .icon-shopcart
              line-height 40px
              font-size 24px
              color #80858a
              &.highlight
                color white
          .num
            position absolute
            top 0
            right 0
            width 24px
            height 16px
            line-height 16px
            text-align center
            border-radius 16px
            font-size 9px
            font-weight 700
            color #ffffff
            background rgb(240, 20, 20)
            box-shadow 0 4px 8px 0 rgba(0, 0, 0, 0.4)
          .list-item
            position absolute
            top -20px
            right -20px
            font-size 20px
            color #35bc36
          .list-enter-active, .list-leave-active
            transition: all 1s
          .list-enter
            opacity: 0
            font-size 0
            transform: translateY(45px)
        .price
          display inline-block
          text-align top
          line-height 24px
          margin-top 12px
          padding-right 12px
          box-sizing border-box
          border-right 1px solid rgba(255, 255, 255, 0.1);
          font-size 16px
          font-weight 700
          color rgba(255, 255, 255, 0.4);
          &.highlight
            color #ffffff
        .desc
          display inline-block
          line-height 24px
          margin-left 12px
          margin-top 12px
          box-sizing border-box
          font-size 10px
          color rgba(255, 255, 255, 0.4)
      .content-right
        flex 0 0 105px
        width 105px
        background #2b343c
        .pay
          height 48px
          line-height 48px
          text-align center
          font-size 12px
          color rgba(255, 255, 255, 0.4);
          font-weight 700
          background #2b333b
          &.highlight
            background #00b43c
            color #ffffff
            font-size 15px
</style>
